<template>
  <div class="code-layout">
    <!-- <div class="code-materials">
      <md-preview :biz_id="detailData.id" type="build-image" class="preview" />
    </div> -->
    <div class="code-info">
      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateBase" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailData.name }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">{{
              detailData.create_user && (detailData.create_user &&
                detailData.create_user.nick_name ||
                detailData.create_user && detailData.create_user.username)
            }}</span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailData.create_time }}</span>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">环境信息 <i class="el-icon-edit-outline edit" @click="updateEnv" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">启动命令行:</span>
            <span class="val">{{ detailData.command }}</span>
          </li>
          <li>
            <span class="key">镜像地址:</span>
            <span class="val">{{ detailData.url }}</span>
          </li>
          <li>
            <span class="key">想定挂载地址:</span>
            <span class="val">{{ detailData.scenario_dir }}</span>
          </li>
          <li>
            <span class="key">资源组:</span>
            <span class="val">{{ detailData.product.name }}</span>
          </li>
          <li>
            <span class="key">端口:</span>
          </li>
          <li>
            <dl class="code-dl" v-for="(e, i) in detailData.port_list" :key="i">
              <ul class="info-item">
                <li>
                  <span class="key">协议:</span>
                  <span class="val">{{ e.protocol }}</span>
                </li>
                <li>
                  <span class="key">端口:</span>
                  <span class="val">{{ e.port }}</span>
                </li>
              </ul>
            </dl>
          </li>
        </ul>
      </div>

      <div class="code-md">
        <md-preview :biz_id="detailData.id" type="build-image" class="preview" />
      </div>
    </div>

    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="仿真环境基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formDataDialog" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="formDataDialog.name" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formDataDialog.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="formDataDialog.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancelBase">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showUpdateEnvDialog" title="环境基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :model="formData" label-width="120px">
        <el-form-item label="启动命令行" prop="command">
          <el-input type="textarea" v-model="formData.command" />
        </el-form-item>
        <el-form-item label="镜像地址" prop="url">
          <el-input type="url" v-model="formData.url" />
        </el-form-item>
        <el-form-item label="想定挂载地址" prop="scenario_dir">
          <el-input type="url" v-model="formData.scenario_dir" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <div class="outin-box" v-for="(e, i) in port_list" :key="i">
            <div class="port-lis">
              <el-radio-group v-model="e.protocol" class="port-lis-radio">
                <el-radio :label="2">tcp</el-radio>
                <el-radio :label="1">http</el-radio>
              </el-radio-group>
              <el-input type="text" v-model="e.port" class="port-el-input" />
            </div>
            <span class="outin-handle">
              <a href="javascript:;" @click="addPort(i)" v-if="i == port_list.length - 1">增加</a>
              <span v-else class="slot-btn"></span>
              <a href="javascript:;" @click="delPort(i)" v-if="port_list.length > 1">删除</a>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="资源组">
          <el-select v-model="formData.product_id" class="full-extent-select">
            <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitEnv">确定</el-button>
          <el-button class="none-type" @click="cancelEnv">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <DialogBox title="仿真环境基本信息" :visible="showUpdateBaseDialog" :confirm="commitBase" :close="cancelBase">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formDataDialog" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="formDataDialog.name" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formDataDialog.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="formDataDialog.desc" />
        </el-form-item>
      </el-form>
    </DialogBox>

    <DialogBox title="环境基本信息" :visible="showUpdateEnvDialog" :confirm="commitEnv" :close="cancelEnv">
      <el-form class="form myself-form" ref="form" :model="formData" label-width="120px">
        <el-form-item label="启动命令行" prop="command">
          <el-input type="textarea" v-model="formData.command" />
        </el-form-item>
        <el-form-item label="镜像地址" prop="url">
          <el-input type="url" v-model="formData.url" />
        </el-form-item>
        <el-form-item label="想定挂载地址" prop="scenario_dir">
          <el-input type="url" v-model="formData.scenario_dir" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <div class="outin-box" v-for="(e, i) in port_list" :key="i">
            <div class="port-lis">
              <el-radio-group v-model="e.protocol" class="port-lis-radio">
                <el-radio :label="2">tcp</el-radio>
                <el-radio :label="1">http</el-radio>
              </el-radio-group>
              <el-input type="text" v-model="e.port" class="port-el-input" />
            </div>
            <span class="outin-handle">
              <a href="javascript:;" @click="addPort(i)" v-if="i == port_list.length - 1">增加</a>
              <span v-else class="slot-btn"></span>
              <a href="javascript:;" @click="delPort(i)" v-if="port_list.length > 1">删除</a>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="资源组">
          <el-select v-model="formData.product_id" class="full-extent-select">
            <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </DialogBox>
  </div>
</template>

<script>
import DialogBox from '@/components/module/dialog-box.vue';
import { putImage, getImageDetail } from '@/api/image'
import { getAllProducts } from '@/api/product'
export default {
  data() {
    return {
      showUpdateEnvDialog: false,
      formData: { type: 3, visibility: 1 },
      port_list: [{ protocol: 2 }],
      productOptions: [],
      formDataDialog: {},
      showUpdateBaseDialog: false,
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        command: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 1000, message: "长度在1到1000个字符" },
        ],
        scenario_dir: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 65535, message: "想定挂载地址" },
        ],
        url: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 65535, message: "镜像地址" },
        ],
      },
    };
  },
  props: ['detailData'],
  watch: {
    detailData(val) {
      console.log("val", val)
      this.getFormData()
    },
  },
  async created() {

  },
  components: {
    DialogBox,
  },
  async mounted() {
    this.$nextTick(() => {
      console.log(this.detailData)
    })
    this.getProductList()
    this.getFormData()
  },
  destroyed() {

  },
  methods: {
    avatarPath(data) {
      this.formData.avatar = data;
    },
    updateBase() {
      this.formDataDialog = { ...this.detailData }
      this.showUpdateBaseDialog = true
    },
    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putImage(this.formDataDialog);
          if (res && res.data) {
            this.$emit("getDetail")
            this.showUpdateBaseDialog = false
          }
        }
      })
    },
    cancelBase() {
      this.showUpdateBaseDialog = false
    },

    editState(state) {
      console.log(state)
    },
    getFormData() {
      this.formData = JSON.parse(JSON.stringify(this.detailData))
      this.port_list = this.formData.port_list
    },
    async setFormData() {
      this.formData.port_list = []
      for (let i = 0; i < this.port_list.length; i++) {
        if (this.port_list[i].port) {
          this.formData.port_list.push(this.port_list[i])
        }
      }
    },
    updateEnv() {
      this.showUpdateEnvDialog = true
    },

    commitEnv() {
      this.setFormData()
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putImage(this.formData);
          if (res && res.data) {
            this.showUpdateEnvDialog = false
            this.freshData()
          }
        }
      })
    },
    cancelEnv() {
      this.showUpdateEnvDialog = false
    },
    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },
    addPort() {
      this.port_list.push({ protocol: 2 })
    },
    delPort(i) {
      this.port_list.splice(i, 1)
    },
    async freshData() {
      let res = await getImageDetail({ id: this.detailData.id });
      if (res && res.data) {
        this.$emit('update:detailData', res.data);
        this.getFormData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>